<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>41.紧贴底部的页脚.2</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script>
  /*
    难题：页脚紧贴视口的最底部
  
    二、更灵活的解决方案

      1. flex（最佳）
        <body> 的 min-height 属性指定为 100vh，这样它就至少会占据整个视口的高度
        页头和页脚的高度由其内部因素来决定，而内容区块的高度应该可以自动伸展并占满所有的可用空间
      
      2. 我们只要给 <main> 这个容器的 flex 属性指定一个大于 0 的值（比如 1 即可）
        footer 由内容撑开，body 最小高度已定，则动态计算 main 的高度

        body {
          display: flex;
          flex-direction: column;
          min-height: 100vh;
        }

        main {
          flex: 1;
        }
  
  */
  </script>

  <style>
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      line-height: 1.5;
      margin: 0;
	    font: 100% Baskerville, Palatino Linotype, Palatino, serif;
    } 

    header { 
      text-align: center;
      height: 3em;
    }

    h1 {
      margin: .5em 0 0;
    }

    main {
      flex: 1;
    }

    main, footer {
      display: block;
      padding: .5em calc(50% - 400px);
    }

    #contents:checked ~ p {
      display: none;
    }

    footer {
      background: linear-gradient(#222, #444);
      color: white;
    }
  </style>
</head>

<body>
  <header>
    <h1>Site name</h1>
  </header>
  <main>
    <input type="checkbox" id="contents" /><label for="contents">Toggle contents</label>
    <p>Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat. Et laborum venison
      nostrud, ut veniam sint kielbasa ullamco pancetta. Qui drumstick tail, bacon leberkas shoulder capicola laborum.
      Minim ipsum bacon, mollit laboris t-bone pariatur. Ham hock reprehenderit sint beef, sausage pig eiusmod t-bone
      shankle strip steak.</p>
    <p>Cow enim excepteur, boudin dolore lorem magna fugiat consequat voluptate. Picanha fugiat chicken, cupim aliquip
      magna filet mignon prosciutto ut nostrud. Kielbasa rump frankfurter sunt corned beef. Andouille in cillum
      deserunt, rump et picanha landjaeger tongue anim.</p>
    <p>Ad meatball ipsum ground round shank. Quis ipsum meatball exercitation. Laborum swine spare ribs, sunt ball tip
      magna t-bone venison. Velit doner voluptate non occaecat do ribeye kevin strip steak et. Esse biltong shank
      ribeye dolor pariatur aute deserunt non est eiusmod pork belly pancetta pork chop. Pork chop id consectetur rump,
      meatball short loin brisket tail andouille deserunt alcatra irure prosciutto do.</p>
    <p>Dolore reprehenderit ex, meatball doner commodo consectetur ea ribeye. Ad aliqua kevin, chuck excepteur minim et
      cow esse ham hock landjaeger. Alcatra bresaola dolore tempor do, excepteur in velit flank officia dolore meatloaf
      corned beef picanha. Eu pancetta brisket eiusmod ipsum aute sausage, culpa rump shoulder excepteur nostrud
      venison sed pork loin. Tempor proident do magna ground round. Ut venison frankfurter et veniam dolore. Pig pork
      belly beef ribs kevin, doner exercitation magna esse shankle.</p>
    <p>Flank anim chuck boudin id consectetur bresaola ham pork loin cupim andouille frankfurter. Proident do ball tip
      nostrud nulla sed, frankfurter ut commodo corned beef ut. Ex aute in, pig deserunt beef ribs turducken pastrami
      irure ball tip pork belly pork chop sausage id. Chicken sunt nisi tempor sed. In eiusmod non fatback tempor
      tenderloin pastrami adipisicing cow lorem ut tail jerky cupidatat venison. Jowl consequat commodo pork loin ipsum
      pork belly prosciutto aute beef. Ball tip shoulder aliqua, fugiat landjaeger kevin pork chop beef ribs leberkas
      hamburger cillum turkey ut doner culpa.</p>
  </main>
  <footer>
    <p>© 2015 No rights reserved.</p>
    <p>Made with ♥ by an anonymous pastafarian.</p>
  </footer>
</body>

</html>